<template>
  <div class="register-wrapper" v-loading="loading">
    <el-form ref="form" label-width="130px" :rules="rules" :model="form">
      <el-form-item label="标题：" prop="demandTitle">
        <el-input
          type="text"
          v-model="form.demandTitle"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="施工地点：" prop="areaValue">
        <el-cascader
          ref="areaCascader"
          :props="prop"
          v-model="form.areaValue"
          :options="areaList"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input
          type="text"
          v-model="form.address"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="需求类型：" prop="demandType">
        <el-select
          v-model="form.demandType"
          placeholder="请选择"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in demandTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类别：" prop="productType">
        <el-select
          v-model="form.productType"
          placeholder="请选择"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in productTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细介绍：" prop="intro">
        <el-input
          class="textarea"
          type="textarea"
          v-model="form.intro"
          placeholder="请输入详细介绍"
        ></el-input>
      </el-form-item>
      <el-form-item label="工期进度：" prop="schedule">
        <el-input
          type="text"
          v-model="form.schedule"
          placeholder="请输入工期进度"
        ></el-input>
      </el-form-item>
      <el-form-item label="进场时间：" prop="entryTime">
        <el-date-picker
          v-model="form.entryTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="付款方式：" prop="paymentWay">
        <el-select
          v-model="form.paymentWay"
          placeholder="请选择"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in payTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票：" prop="invoiceWay">
        <el-select
          v-model="form.invoiceWay"
          placeholder="请选择"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in invoiceTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人：" prop="contactName">
        <el-input
          type="text"
          v-model="form.contactName"
          placeholder="请输入联系人"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="contactPhone">
        <el-input
          type="text"
          v-model="form.contactPhone"
          placeholder="请输入联系电话"
        ></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" class="submit-btn" @click="submit">提交</el-button>
  </div>
</template>

<script>
import { getCity } from "@/api/common.js";
import { demandType, productType, payType, invoiceType, const2Arr } from "@/consts";
import { demandDetail } from "@/api/demand.js";
export default {
  name: "DemandForm",
  props: {
    id: {
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      rules: {
        demandTitle: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        areaValue: [{ required: true, message: "施工地点不能为空", trigger: "blur" }],
        address: [{ required: true, message: "详细地址不能为空", trigger: "blur" }],
        demandType: [{ required: true, message: "需求类型不能为空", trigger: "blur" }],
        productType: [{ required: true, message: "类别不能为空", trigger: "blur" }],
        intro: [{ required: true, message: "详细介绍不能为空", trigger: "blur" }],
        schedule: [{ required: true, message: "工期进度不能为空", trigger: "blur" }],
        entryTime: [{ required: true, message: "进场时间不能为空", trigger: "blur" }],
        paymentWay: [{ required: true, message: "付款方式不能为空", trigger: "blur" }],
        invoiceWay: [{ required: true, message: "发票不能为空", trigger: "blur" }],
        contactName: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的联系电话",
            trigger: "blur",
          },
        ],
      },
      form: {
        id: "",
        demandTitle: "",
        areaValue: "",
        provinceId: "",
        province: "",
        cityId: "",
        city: "",
        areaId: "",
        area: "",
        address: "",
        demandType: "",
        productType: "",
        intro: "",
        schedule: "",
        entryTime: "",
        paymentWay: "",
        invoiceWay: "",
        contactName: "",
        contactPhone: "",
      },
      demandType,
      productType,
      payType,
      invoiceType,
      demandTypeArr: const2Arr(demandType),
      productTypeArr: const2Arr(productType),
      payTypeArr: const2Arr(payType),
      invoiceTypeArr: const2Arr(invoiceType),
      areaList: [],
      prop: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          const nodes = [];
          setTimeout(() => {
            // 构造查询条件
            let query = {
              p_code: node.value,
              level: node.level + 2,
            };
            //查询接口
            getCity(query).then((res) => {
              res.result.map((item) => {
                let obj = {
                  value: item.code,
                  label: item.name,
                  leaf: item.level == 4, // 节点级别，如果没有子节点就停止查询
                };
                nodes.push(obj);
              });
              //重新加载节点
              resolve(nodes);
            });
          }, 100);
        },
      },
    };
  },
  created() {
    this.getCity();
    if (this.id) {
      this.loading = true;
      this.form.id = this.id;
      this.demandDetail();
    }
  },
  methods: {
    getCity() {
      getCity({ level: 2, p_code: "" }).then((res) => {
        this.areaList = res.result.map((item) => ({
          value: item.code,
          label: item.name,
        }));
      });
    },
    getCheckedNodes() {
      return this.$refs.areaCascader.getCheckedNodes();
    },
    demandDetail() {
      this.loading = true
        demandDetail({ id: this.id }).then((res) => {
        this.form = res.result;
        this.$nextTick(() => {
          this.$set(this.form, 'areaValue', [this.form.provinceId, this.form.cityId, this.form.areaId])
        })
        
        this.loading = false;
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          
          const allNodes = this.getCheckedNodes()[0].pathNodes;
          this.form.provinceId = allNodes[0].value;
          this.form.province = allNodes[0].label;
          this.form.cityId = allNodes[1].value;
          this.form.city = allNodes[1].label;
          this.form.areaId = allNodes[2].value;
          this.form.area = allNodes[2].label;
          this.$emit("submit", this.form);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.textarea {
  min-height: 186px;
}

::v-deep .el-form-item__label {
  line-height: 56px;
  font-size: 16px;
  width: 120px;
}

::v-deep .el-input__inner,
::v-deep .el-textarea__inner,
::v-deep .el-date-editor {
  width: 548px;
  height: 56px;
  font-size: 16px;
}

// 上传图片占位图的尺寸
::v-deep .el-upload--picture-card {
  width: 200px;
  height: 130px;
}

::v-deep .el-select-dropdown__item {
  font-size: 16px;
}

::v-deep .textarea > textarea {
  height: 180px;
  padding: 20px;
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  margin: 70px 0 30px 0;
  font-size: 20px;
}
</style>
